<template>
	<view style="display: flex;flex-direction: row;">
		<!-- 左边 -->
		<!-- <view class="content">
			<view class="content-list">
				<view class="pics">
		<scroll-view class="gundog" scroll-y v-for="(item,index) in navLeft" :key="index">
			<view :class="{'active' :isActive === index}" @click="checked(index)">
				{{item.tit}}
			</view> -->
		<div style="display: flex;flex-direction: column;border-right: 1px solid #eee;">
			<span style="color: #ffaaff;border-left: 4px solid #ffaaff;">当季热卖</span>
			<span>切果/果饼</span>
			<span>苹果蕉梨</span>
			<span>西瓜蜜瓜</span>
			<span>桃李梅枣</span>
			<span>柑橘橙柚</span>
			<span>葡提浆果</span>
			<span>热带水果</span>
			<span>榴莲专区</span>
		</div>
		<!-- </scroll-view>
		</view>
		</view>
		</view> -->
		<!-- 右边 -->
		<div style="display: flex;flex-direction: column">
			<div style="display: flex;flex-direction: row;align-items: center;">
				<div style="display: flex;flex-direction: row;flex: 1;">
					<span style="color: #ffaaff;border-bottom: 4px solid #ffaaff;">全部</span>
					<span>短袖</span>
					<span>长袖</span>
					<span>裤子</span>
			</div>
			<img src="/static/下载.png" style="height: 10px;width: 10px;"/>
		</div>
		<img src="/static/zip.png" style="height: 90px;border-radius: 10px;width: 94%; margin: 10px;"/>
		<span>全部</span>
		<div style="display: flex;flex-direction: column">
			<div class="a">
				<image src="/static/bb.webp" style="width: 80px;height: 60px; margin: 10px;"></image>
				<div class="b">
					<div style="padding: 0px 15px;">球衣</div>
					<div style="padding: 0px 15px;">商品1</div>
					<div class="a" style="justify-content: space-between;flex: 1;">
						<div style="padding: 0px 15px;">￥50</div>
						<div style="padding: 0px 15px;text-decoration: line-through;">￥200</div>
						<span style="padding: 0px 20px 20px 50px">
							<img src="/static/add.png" style="width: 20px;height: 20px;display: flex;justify-content: flex-end;">
						</span>
					</div>
				</div>
			</div>
			<div class="a">
				<image src="/static/zz.webp" style="width: 88px;height: 60px; margin: 10px;"></image>
				<div class="b">
					<div style="padding: 0px 15px;">军大衣</div>
					<div style="padding: 0px 15px;">商品2</div>
					<div class="a" style="justify-content: space-between;flex: 1;">
						<div style="padding: 0px 15px;">￥20</div>
						<div style="padding: 0px 15px;text-decoration: line-through;">￥70</div>
						<span style="padding: 0px 20px 20px 50px">
							<img src="/static/add.png" style="width: 20px;height: 20px;display: flex;justify-content: flex-end;">
						</span>
					</div>
				</div>
			</div>
			<div class="a">
				<image src="/static/ll.jpg" style="width: 87px;height: 60px; margin: 10px;"></image>
				<div class="b">
					<div style="padding: 0px 15px;">精神套装</div>
					<div style="padding: 0px 15px;">商品3</div>
					<div class="a" style="justify-content: space-between;flex: 1;">
						<div style="padding: 0px 15px;">￥50</div>
						<div style="padding: 0px 15px;text-decoration: line-through;">￥90</div>
						<span style="padding: 0px 20px 20px 50px">
							<img src="/static/add.png" style="width: 20px;height: 20px;display: flex;justify-content: flex-end;">
						</span>
					</div>
				</div>
			</div>
			<div class="a">
				<image src="/static/mm.webp" style="width: 80px;height: 60px; margin: 10px;"></image>
				<div class="b">
					<div style="padding: 0px 15px;">秋衣</div>
					<div style="padding: 0px 15px;">商品4</div>
					<div class="a" style="justify-content: space-between;flex: 1;">
						<div style="padding: 0px 15px;">￥80</div>
						<div style="padding: 0px 15px;text-decoration: line-through;">￥180</div>
						<span style="padding: 0px 20px 20px 50px">
							<img src="/static/add.png" style="width: 20px;height: 20px;display: flex;justify-content: flex-end;">
						</span>
					</div>
				</div>
			</div>
			<div class="a">
				<image src="/static/jj.webp" style="width: 80px;height: 60px; margin: 10px;"></image>
				<div class="b">
					<div style="padding: 0px 15px;">精神套装</div>
					<div style="padding: 0px 15px;">旺仔战神</div>
					<div class="a" style="justify-content: space-between;flex: 1;">
						<div style="padding: 0px 15px;">￥5</div>
						<div style="padding: 0px 15px;text-decoration: line-through;">￥20</div>
						<span style="padding: 0px 20px 20px 70px">
							<img src="/static/add.png" style="width: 20px;height: 20px;display: flex;justify-content: flex-end;">
						</span>
					</div>
				</div>
			</div>
		</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// isActive:0,
				// navLeft:[
				// 	{index:0,tit:"当季热卖"},
				// 	{index:1,tit:"水果/切果"},
				// 	{index:2,tit:"苹果香蕉"},
				// 	{index:3,tit:"小美/小帅"},
				// 	{index:4,tit:"西瓜蜜瓜"},
				// 	{index:5,tit:"热带水果"},
				// 	{index:6,tit:"乌梅紫江"},
				// 	{index:7,tit:"乌梅子酱"},
				// 	{index:8,tit:"榴莲专区"},
				// 	{index:9,tit:"王权富贵"}
				// ]
			}
		},
		methods: {
			// checked(index){
			// 	this.isActive = index
			// }
			wx1(index){
				console.log(index)
			}
		}
	}
</script>

<style>
	.a{
		display: flex;flex-direction: row;
	}
	.b{
		display: flex;flex-direction: column;
	}
	/* .page{
		height: 100%;
	}
	.content{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.content-list{
		width: 150rpx;
		height: 76%;
		position: fixed;
		overflow: auto;
	}
	.pics{
		width: 100%;
		height: auto;
	}
	.gundong{
		width: 200rpx;
		height: 100rpx;
	}
	.gundong view{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffaaff;
	}
	.active{
		color: aqua;
		font-weight: 700;
		border-left: 8rpx solid #ffaaff;
	} */
	span{
		color: #999;
		padding: 20px;
	}
</style>
